<template>
  <div v-if="show" class="schedule-modal-overlay" @click="closeModal">
    <div class="schedule-modal pixel-border" @click.stop>
      <div class="schedule-header">
        <h3 class="schedule-title">📅 课程时间表</h3>
        <a href="#" class="close-btn" @click.prevent.stop="closeModal" style="display: inline-block; width: 24px; height: 24px; background: red; color: white; text-decoration: none; position: fixed; top: 80px; right: 20px; z-index: 9999; cursor: pointer;">✕</a>
      </div>

      <div class="schedule-content">
        <div class="schedule-grid">
          <div v-for="(item, index) in scheduleItems" :key="index" class="schedule-item">
            <div class="section-number pixel-badge" :class="getSectionClass(item.section)">
              第{{ item.section }}节
            </div>
            <div class="time-range">
              <span class="time-start">{{ item.startTime }}</span>
              <span class="time-separator">-</span>
              <span class="time-end">{{ item.endTime }}</span>
            </div>
          </div>
        </div>

        <div class="schedule-notes">
          <div class="note-item">
            <span class="note-icon">🍽️</span>
            <span class="note-text">12:00-14:00 午休时间</span>
          </div>
          <div class="note-item">
            <span class="note-icon">🍴</span>
            <span class="note-text">18:00-19:00 晚餐时间</span>
          </div>
          <div class="note-item">
            <span class="note-icon">📚</span>
            <span class="note-text">22:00以后 非上课时间</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
interface ScheduleItem {
  section: number
  startTime: string
  endTime: string
}

// 定义组件的props
interface Props {
  show: boolean
}

const props = defineProps<Props>()

// 定义组件的emits
const emit = defineEmits<{
  close: []
}>()

// 节次时间表数据
const scheduleItems: ScheduleItem[] = [
  { section: 1, startTime: '8:00', endTime: '10:00' },
  { section: 2, startTime: '10:00', endTime: '12:00' },
  { section: 3, startTime: '12:00', endTime: '14:00' },
  { section: 4, startTime: '14:00', endTime: '16:00' },
  { section: 5, startTime: '16:00', endTime: '18:00' },
  { section: 6, startTime: '19:00', endTime: '21:00' },
  { section: 7, startTime: '21:00', endTime: '22:00' }
]

// 关闭弹窗
const closeModal = () => {
  console.log('关闭弹窗被触发')
  emit('close')
}

// 键盘事件处理
const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Escape') {
    console.log('ESC键被按下')
    closeModal()
  }
}

// 挂载时添加键盘监听
onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

// 卸载时移除键盘监听
onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})

// 根据节次获取样式类
const getSectionClass = (section: number): string => {
  if (section <= 2) return 'morning'
  if (section <= 5) return 'afternoon'
  return 'evening'
}
</script>

<style scoped>
.schedule-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 16px;
}

.schedule-modal {
  background: white;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.8);
  border: 3px solid var(--pixel-primary);
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 2px solid var(--pixel-gray);
  background-color: var(--pixel-light);
}

.schedule-title {
  margin: 0;
  font-size: 14px;
  color: var(--pixel-primary);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.close-btn {
  background: var(--pixel-danger);
  color: white;
  border: 2px solid var(--pixel-dark);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
  transition: all 0.1s ease;
  border-radius: 3px;
  min-width: 24px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
}

.close-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  background: #ff4444;
}

.close-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.schedule-content {
  padding: 20px;
}

.schedule-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 2px solid var(--pixel-gray);
  border-radius: 4px;
  transition: all 0.1s ease;
}

.schedule-item:hover {
  border-color: var(--pixel-primary);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.section-number {
  min-width: 60px;
  text-align: center;
  font-size: 10px;
  padding: 4px 6px;
  border-radius: 3px;
  font-weight: bold;
}

.section-number.morning {
  background-color: var(--pixel-warning);
  color: white;
  border: 2px solid var(--pixel-warning);
}

.section-number.afternoon {
  background-color: var(--pixel-info);
  color: white;
  border: 2px solid var(--pixel-info);
}

.section-number.evening {
  background-color: var(--pixel-secondary);
  color: white;
  border: 2px solid var(--pixel-secondary);
}

.time-range {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: var(--pixel-dark);
}

.time-start,
.time-end {
  font-family: 'Courier New', monospace;
  background-color: var(--pixel-light);
  padding: 2px 6px;
  border: 1px solid var(--pixel-gray);
  border-radius: 2px;
}

.time-separator {
  margin: 0 8px;
  color: var(--pixel-gray);
}

.schedule-notes {
  border-top: 2px solid var(--pixel-gray);
  padding-top: 16px;
}

.note-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--pixel-dark);
}

.note-icon {
  font-size: 16px;
}

.note-text {
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .schedule-modal-overlay {
    padding: 8px;
  }

  .schedule-modal {
    max-width: 100%;
    max-height: 90vh;
  }

  .schedule-header {
    padding: 12px 16px;
  }

  .schedule-title {
    font-size: 12px;
  }

  .schedule-content {
    padding: 16px;
  }

  .schedule-item {
    padding: 10px;
    gap: 10px;
  }

  .section-number {
    min-width: 50px;
    font-size: 9px;
    padding: 3px 5px;
  }

  .time-range {
    font-size: 12px;
  }

  .note-item {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .schedule-content {
    padding: 12px;
  }

  .schedule-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
  }

  .section-number {
    min-width: auto;
  }

  .time-range {
    align-self: stretch;
    justify-content: center;
  }
}
</style>